import Link from 'next/link'
import Image from 'next/image'
import { useState } from 'react'
import classNames from 'classnames'

import iconArrowDown from '@/assets/icons/ic_arrowdown.png'
import iconArrowUp from '@/assets/icons/ic_arrowup.png'

export default function Footer() {
  const menuData = [
    {
      label: 'Instagram Downloader',
      children: [
        {
          label: 'Instagram Video Download',
          link: '/download-instagram-videos/',
        },
        {
          label: 'Instagram Story Download',
          link: '/instagram-story-download/',
        },
        {
          label: 'Instagram Photo Download',
          link: '/instagram-photo-download/',
        },
        {
          label: 'Instagram Reels Download',
          link: '/download-reels-instagram/',
        },
      ],
    },
    {
      label: 'Instagram Viewer',
      children: [
        { label: 'Instagram Story Viewer', link: '/instagram-story-viewer/' },
        {
          label: 'Instagram Profile Viewer',
          link: '/instagram-profile-viewer/',
        },
      ],
    },
    {
      label: 'Instagram Generator',
      children: [
        {
          label: 'Instagram Hashtag Generator',
          link: '/instagram-hashtag-generator/',
        },
        {
          label: 'Instagram Caption Generator',
          link: '/instagram-caption-generator/',
        },
        { label: 'Instagram Bio Generator', link: '/instagram-bio-generator/' },
        {
          label: 'Instagram Username Generator',
          link: '/instagram-username-generator/',
        },
      ],
    },
  ]
  const [openIndex, setOpenIndex] = useState(0)
  return (
    <div className="w-view mx-auto max-sm:w-sView max-sm:px-[20px]">
      <div className="flex flex-row justify-between gap-6 pt-[30px] pb-[60px] max-sm:flex-col max-sm:w-full max-sm:pb-0 max-sm:gap-0">
        {menuData.map((item, index) => (
          <div
            key={index}
            className={classNames('flex flex-col', {
              ['max-sm:border-b']: index !== menuData.length - 1,
            })}
          >
            <div
              className="font-bold text-black text-desc py-3.5 flex flex-row justify-between w-full"
              onClick={() => setOpenIndex(index)}
            >
              {item.label}
              <Image
                className="sm:hidden"
                src={openIndex === index ? iconArrowUp : iconArrowDown}
                alt="icon arrow"
                width={16}
                height={16}
                style={{ height: '16px' }}
              ></Image>
            </div>
            <div
              className={`grid ${
                openIndex === index ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
              } sm:grid-rows-[1fr]`}
              style={{ transition: 'all 200ms' }}
            >
              <div className="overflow-hidden">
                {item.children.map((child) => (
                  <Link href={child.link} key={child.label}>
                    <div className="py-2 text-secondary">{child.label}</div>
                  </Link>
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="py-[20px] text-center text-menuTxt border-t">
        Copyright @ 2024 sssgram
      </div>
    </div>
  )
}
